<template>
	<view class="wholeContinaer">
		<!-- 
		 标签说明：
		 markers：标记点
		 longitude：中心经度
		 latitude：中心纬度
		 scale：缩放级别，默认值16 取值范围为3-20
		  show-location：显示带有方向的当前定位点
		 -->
		<map id="myMap" :markers="markers" :longitude="poi.longitude" :latitude="poi.latitude" scale='18' show-location>
		</map>

		<!-- 打卡 -->
		<view class="checkInPanel">
			<button class="checkInBtn" @click="checkIn">
				<view v-if="clickSign==0" class="checkInTitle">上班打卡</view>
				<view v-if="clickSign==1" class="checkInTitle">下班打卡</view>
				<view v-if="clickSign==2" class="checkInTitle">更新打卡</view>
				<view class="checkInTime">{{time}}</view>
			</button>

			<!-- 显示坐标图标+详细地址 -->
			<view class="whitePositionPanel">
				<view class="positonTextRow">
					<image class="positionIcon" src="@/static/images/gps/positionIcon.png"></image>
					<view class="positionFont">{{addressDetailName}}</view>
				</view>
				<view class="signInTime-bg">
					<view class="signInTime">上班打卡:{{signInTime}}</view>
					<view class="signBackTime">下班打卡:{{signBackTime}}</view>
				</view>
			</view>

			<!--重新定位图标  -->
			<view class="rePosition" @click="rePosition">
				<image class="positionIcon" src="@/static/images/gps/rePosition.png"></image>
				<view class="positionFont">重新定位</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 根据自己实际项目的位置引用文件
	import qqmapsdk from '../../utils/qqmap-wx-jssdk.min.js';
	// 引用工具类格式化日期
	import util from '../../utils/util.js';
	export default {
		data() {
			return {
				// 打卡标识 0-上班打卡 1-下班打卡 2-更新下班签退时间
				clickSign: 0,
				signInTime: '', // 签到时间
				signBackTime: '', // 签退事件
				// 标记点
				markers: '',
				// 经纬度
				poi: {
					latitude: '', //中心纬度
					longitude: '' //中心经度
				},
				// 详细地址信息
				addressDetailName: '',
				// 打卡时间 dd:hh:ss
				time: '',
				timer: '',
				timer2: '', // 用来每个一段时间自动刷新一次定位
				// canClick: true
			}
		},
		methods: {
			// 获取当前位置的详细信息
			getAddress() {
				const that = this

				// 实例化腾讯地图API核心类
				const QQMapWX = new qqmapsdk({
					key: 'JF7BZ-OEYEU-OD2VS-2XALL-VOMDE-7MFNU' // 必填
				});
				//获取当前位置
				wx.getLocation({
					type: 'gcj02', //type 一定要选gcj02
					success: function(res) {
						console.log("成功定位", res);

						//根据坐标获取当前位置名称，显示在顶部，腾讯地图逆地址解析
						QQMapWX.reverseGeocoder({
							location: {
								latitude: res.latitude, // 已经获取的纬度
								longitude: res.longitude // 已经获取的经度
							},
							// 成功后的回调
							success: function(addressRes) {
								// console.log("成功后的回调", addressRes);

								const addressDetailName = addressRes.result.formatted_addresses
									.recommend; // 解析详细地址信息

								that.addressDetailName = addressDetailName; // 显示 详细地址信息
								console.log("详细地址信息", addressDetailName);

								const addressData = addressRes.result;

								const lat = addressData.location.lat; // 纬度
								const lng = addressData.location.lng; // 经度

								const mks = [];
								//当get_poi为0时或者为不填默认值时，检索目标位置，按需使用
								mks.push({ // 获取返回结果，放到mks数组中
									title: addressDetailName,
									id: 0,
									latitude: lat,
									longitude: lng,
									iconPath: '../../static/images/gps/myPosition.png', // 图标路径
									width: 21,
									height: 28,
									callout: { //在markers上展示地址名称，根据需求是否需要
										content: addressDetailName,
										color: '#000',
										display: 'ALWAYS'
									}
								});
								that.markers = mks, // 设置markers属性和地图位置poi，将结果在地图展示
									that.poi.latitude = lat,
									that.poi.longitude = lng
							},
							fail: function(error) {
								console.error("解析异常", error);
							},
							complete: function(res) {
								console.log("解析执行完成", res);
							}
						})
					},
				})
			},
			/**
			 * 获取时间
			 */
			getTime() {
				let that = this
				let time = that.time
				let timer = setInterval(function() {
					let time = util.formatTime(new Date())
					that.time = time.substr(-8)
					if (time == 0) {
						// 页面跳转后，要把定时器清空掉，免得浪费性能
						clearInterval(that.timer)
					}
				}, 1000)
			},
			/**
			 * 重新获取定位事件函数
			 */
			rePosition() {
				console.log('用户点了重新定位')
				// 重新获取定位
				this.getAddress()
			},
			/**
			 * 打卡事件函数处理
			 */
			checkIn() {
				// this.canClick = false
				console.log('用户点击了签到')

				const that = this
				const nowTime = util.formatTime(new Date())

				// 弹框用户确认信息
				wx.showModal({
					title: '请确认打卡信息',
					content: '请确认待整改项已整改完毕！',
					content: `地点：${that.addressDetailName}\n时间：${nowTime}`, // 开发者工具上没有换行，真机调试时会有的
					confirmText: '确认',
					success(res) {
						if (res.confirm) {
							console.log('用户点击确定')
							console.log('打卡标志', that.clickSign)
							console.log('res', res)

							if (that.clickSign == 0) {
								that.clickSign = 1
								that.signInTime = nowTime
							} else if (that.clickSign == 1) {
								that.clickSign = 2
								that.signBackTime = nowTime
							} else {
								// 更新时间
								that.signBackTime = nowTime
							}

							// 调起签到接口
							// that.realyCheckIn()

						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			},
			// realyCheckIn: function() {
			// 	var that = this
			// 	var patrolForm = app.globalData.patrolForm // 其他需要一并提交过去的业务数据

			// 	console.log(app.globalData)
			// 	// debugger
			// 	// 要在这里给 patrolForm 补充其他的参数
			// 	patrolForm.checkaddress = this.data.addressName
			// 	patrolForm.searchtime = util.formatTime(new Date())
			// 	// 应该先判断用户有没有登录，没登录就授权登录
			// 	patrolForm.searchuser = app.globalData.user ? app.globalData.user.UserName : app.globalData.userInfo
			// 		.nickName
			// 	console.log("传给后台的 searchuser：", patrolForm.searchuser)
			// 	// 拼接："经度,纬度"
			// 	patrolForm.latandlon = this.data.poi.longitude + "," + this.data.poi.latitude


			// 	console.log(patrolForm)
			// 	console.log("↑ 签到提交的post参数")

			// 	var tmpNumber = 0
			// 	wx.request({
			// 		url: urlList.submitCheckInInfo,
			// 		data: patrolForm,
			// 		method: "POST",
			// 		header: {
			// 			'content-type': 'application/x-www-form-urlencoded'
			// 		},
			// 		success: function(res) {
			// 			console.log(res)
			// 			if (res.data.IsSuccess) {
			// 				console.log(res.data.IsSuccess, typeof(res.data.IsSuccess))
			// 				console.log("请求成功")
			// 				var patrolId = res.data.ReturnData[0].id
			// 				// // 看怎么取到返回的id
			// 				// debugger

			// 				if (patrolForm.img_arr1.length > 0) {
			// 					for (var i = 0; i < patrolForm.img_arr1.length; i++) {
			// 						tmpNumber = i
			// 						wx.uploadFile({
			// 							// 图片上传的接口地址
			// 							url: urlList.submitCheckInPhoto + "?patrolid=" + patrolId,
			// 							filePath: patrolForm.img_arr1[i],
			// 							name: 'content',
			// 							// formData: {
			// 							//   // 这里面可以携带一些参数一并传过去
			// 							//   patrolId: patrolId
			// 							// },
			// 							// header: {
			// 							//   Authorization: token
			// 							// },
			// 							success: function(res) {
			// 								console.log(res)
			// 							},
			// 							fail: function(res) {
			// 								this.canClick = true
			// 								// that.setData({
			// 								// 	canClick: true
			// 								// })
			// 							},
			// 							complete: function() {
			// 								// 因为上传图片是异步操作,所以会导致这里的 i 会取不到，故需要用个作用域更大点的变量来标识，否则 if 里面的代码不会执行
			// 								if (tmpNumber === patrolForm.img_arr1.length - 1) {
			// 									// 有图片就等图片上传完了再返回首页
			// 									wx.showToast({
			// 										title: '巡查签到成功！',
			// 										icon: 'success',
			// 										duration: 2000,
			// 										complete: function() {
			// 											wx.navigateBack({
			// 												delta: 2 // 回退两层页面
			// 											})
			// 										}
			// 									})
			// 								}
			// 							}
			// 						})
			// 					}
			// 				} else {
			// 					wx.showToast({
			// 						title: '巡查签到成功！',
			// 						icon: 'success',
			// 						duration: 2000,
			// 						complete: function() {
			// 							wx.navigateBack({
			// 								delta: 2
			// 							})
			// 						}
			// 					})
			// 				}
			// 			}
			// 		},
			// 		fail: function(res) {
			// 			this.canClick = true
			// 			// that.setData({
			// 			// 	canClick: true
			// 			// })
			// 		}
			// 	})
			// },
		},
		onLoad() {
			const that = this
			that.getTime()
			that.getAddress()
		},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {
			clearInterval(this.data.timer)
			clearInterval(this.data.timer2)
			console.log("定时器已被清除")
		},

	}
</script>

<style scoped lang="scss">
	#myMap {
		width: 100%;
		height: 100vh;
	}

	.wholeContinaer {
		background-color: #f2f2f2;
		position: relative;
		height: 100vh;
	}

	.mapContianer {
		background-color: turquoise;
		width: 100vw;
		height: 100vh;
	}

	.checkInPanel {
		position: absolute;
		width: 705rpx;
		height: 520rpx;
		bottom: 25rpx;
		left: 25rpx;
		/* background-color: #ffffff; */
	}

	.checkInBtn {
		width: 280rpx;
		height: 280rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: absolute;
		left: calc(50% - 140rpx);
		z-index: 12;

		border-radius: 50%;
		background-image: linear-gradient(180deg,
				#00a0e9 0%,
				#0095e9 73%,
				#0089e9 100%);
		box-shadow: 0 0 10rpx 0rpx #0089e9;
		/* margin: 0 auto; */
	}

	.disableClick {
		pointer-events: none;
	}

	.checkInTitle {
		font-weight: bold;
		font-family: FZLTZHK--GBK1-0;
		font-size: 45rpx;
		line-height: 34rpx;
		color: #ffffff;
	}

	.checkInTime {
		font-family: FZLTZHK--GBK1-0;
		font-size: 33rpx;
		line-height: 34rpx;
		color: #8cd7fe;
		margin-top: 31rpx;
	}

	.whitePositionPanel {
		width: 100%;
		height: 412rpx;
		position: absolute;
		bottom: 0rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		align-items: center;
		justify-content: center;
	}

	.positonTextRow {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 235rpx;
	}

	.positionIcon {
		width: 20rpx;
		height: 26rpx;
		margin-right: 10rpx;
	}

	.positionFont {
		font-family: FZLTZHK--GBK1-0;
		font-size: 22rpx;
		line-height: 29rpx;
		color: #9c9c9c;
	}

	.signInTime-bg {
		height: 70rpx;
		background-color: gainsboro;
		width: 100%;
	}

	.signInTime {
		margin-top: 6%;
		margin-left: 3%;
		padding-top: 2%;
	}

	.signBackTime {
		margin-top: -6%;
		margin-left: 53%;
	}


	.rePosition {
		width: 130rpx;
		height: 35rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 60rpx;
	}

	.rePosition .positionIcon {
		width: 24rpx;
		height: 24rpx;
		margin-right: 10rpx;
	}

	.rePosition .positionFont {
		font-family: FZLTZHK--GBK1-0;
		font-size: 18rpx;
		color: #333333;
		line-height: 35rpx;
	}
</style>
